<template>
  <el-container>
    <!--头部-->
    <el-header style="min-height: 190px">
      <v-head></v-head>
    </el-header>
    <el-main>
      <div class="posts_container">
        <el-row>
          <el-col :span="20" :offset="2">
            <div class="outline">
              <div class="content">
                <div class="top" style="flow: right">
                  <el-row>
                    <el-col :span="2" :offset="20">
                      <a href="javascript:history.back(-1)"
                        >返回<i class="el-icon-back"></i
                      ></a>
                    </el-col>
                  </el-row>
                </div>
                <div class="title">
                  <h1>{{ posts.title }}</h1>
                  <h4 v-if="posts.digest != null">{{ posts.secondTitle }}</h4>
                  <p>
                    发布日期：{{
                      posts.createTime
                    }}&emsp;&emsp;&emsp;&emsp;&emsp;<span
                      v-if="posts.author != null"
                      >作者：{{ posts.author }}</span
                    >
                  </p>
                </div>

                <div v-if="null!=posts.secondTitle" style="margin-left: 60px">
                  <br /><br />
                  <b>摘要：</b><font style="color:#999">{{ posts.digest }}</font> <br /><br />
                </div>

                <pre v-html="posts.content"></pre>

                <div style="font-color: #999">
                  <br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;访问量：&nbsp;{{ posts.hittimes }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-footer>
      <v-footer></v-footer>
    </el-footer>
  </el-container>
</template>

<script>
import vHead from "@/views/home/header.vue";
import vFooter from "@/views/home/footer.vue";
import Share from "@/views/posts/share.vue";
export default {
  data() {
    return {
      posts: {},
    };
  },
  components: {
    vHead,
    vFooter,
    Share,
  },
  created() {
    this.posts = this.$route.query;
  },
};
</script>

<style scoped>
.posts_container .outline {
  border: #0066ff 1px solid;
  padding: 60px 120px;
  min-height: 300px;
}
/* 标题样式 */
.posts_container .outline .title {
  text-align: center;
}
.posts_container .outline .title h1 {
  color: #2b2b2b;
  font-size: 22px;
  line-height: 2em;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #dedede;
  margin-bottom: 0.7em;
}

.posts_container .outline .title p {
  text-indent: 2em;
  line-height: 2em;
  margin-bottom: 15px;
  color: #999;
  margin: 20px 0 0;
}

/* 内容区样式 */
.posts_container .outline pre {
  border: 0px;
  background: white;
  white-space: pre-wrap;
  word-wrap: break-word;

  text-indent: 2em;
  line-height: 2em;
  margin-bottom: 15px;
  color: #333;
  font-size: 17px;
  text-align: left;
}

a {
  margin: 10px;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
</style>